<template>
  <div>
    {{ propValue }} 
  </div>
</template>

<script lang="ts">

import { defineComponent, onBeforeMount, reactive, ref, SetupContext, toRefs } from 'vue';
import { appModule } from '@/store/app';
import { useRoute, useRouter } from 'vue-router';

// const useUserList = () => {

//   const pending = ref(false);
//   const userList = reactive<{id: number; name: string}[]>([])
//   const loadData = async () => {
//     pending.value = true;
//     const userData =  await appModule.getUser();
//     userData.forEach((item) => {
//       userList.push({
//         id: item.id,
//         name: item.name,
//       });
//     })
//     pending.value = false;
//   }
//   const th: string[] = ['id', 'name'] 
  
//   return {
//     th,
//     pending,
//     userList,
//     loadData,
//   }
// }

export default defineComponent({ components: {},
  props: {
    propValue: String
  },
  setup(props: any, context: SetupContext ) {
    
    onBeforeMount(() => {
      console.log(this)
      console.log(useRoute());
      console.log(useRouter());
    })
    console.log(props);
    return {
      // ...useUserList(),
    };
  },
}); 
</script>

<style lang="scss" scoped>

</style>